<template>
  <div>
    <span>
      <span
        v-if="hideFlag"
        :style="{
          color: moneyColor ? moneyColor : '',
          fontSize: moneySize ? moneySize : '',
          fontWeight: moneyWeight ? moneyWeight : '',
        }"
        >{{ hideValue }}</span
      >
      <span
        v-if="!hideFlag"
        :style="{
          color: moneyColor ? moneyColor : '',
          fontSize: moneySize ? moneySize : '',
          fontWeight: moneyWeight ? moneyWeight : '',
        }"
        >{{ showValue }}</span
      >
      <span v-if="showBtn" @click="switchTextBtn">
        <a-icon
          :style="{ fontSize: '19px', color: '#7c7b7b', marginLeft: '5px' }"
          v-if="hideFlag"
          type="eye-invisible"
          theme="filled" />
        <a-icon
          :style="{ fontSize: '19px', color: '#5d5d5d', marginLeft: '5px' }"
          v-if="!hideFlag"
          type="eye"
      /></span>
      <!-- <span>{{ email | emailfilter}}</span> -->
    </span>
  </div>
</template>

<script>
export default {
  name: "HideData",
  props: {
    params: {
      value: "",
      type: "",
      showBtn: false,
    },
    hide: "",
  },

  data() {
    return {
      switchText: "显示金额",
      showValue: "",
      hideValue: "",
      hideFlag: true,
      showBtn: false,
      email: "qu@iwghejqhwgejhqwgejhqwge",
      moneyColor: "",
      moneySize: "",
      moneyWeight: "",
    };
  },

  watch: {
    params: {
      handler(v) {
        // console.log("v:{}", v);

        this.showBtn = v.showBtn;
        this.hideValue = this.getHideValue(v.type, v.value);
        this.showValue = v.value;
        this.moneyColor = v.moneyColor;
        this.moneySize = v.moneySize;
        this.moneyWeight = v.moneyWeight;
      },
      immediate: true,
      deep: true,
    },
    hide: {
      handler(v) {
        if (v == "1") {
          this.hideFlag = true;
        } else if (v == "2") {
          this.hideFlag = false;
        }
      },
      immediate: true,
      deep: true,
    },
  },

  methods: {
    switchTextBtn: function () {
      this.switchText = this.hideFlag ? "隐藏金额" : "显示金额";
      this.hideFlag = !this.hideFlag;
    },
    getHideValue: function (type, value) {
      if (type == null || value == null) return;

      if (type == "account") {
        return this.hideAccount(value);
      } else if (type == "money") {
        return this.hideMoney(value);
      } else if (type == "mobileNo") {
        return this.hideMobileNo(value);
      } else if (type == "idName") {
        return this.hideName(value);
      } else if (type == "email") {
        return this.hideEmail(value);
      } else if (type == "idCard") {
        return this.hideidCard(value);
      } else if (type == "bankCard") {
        return this.hidebankCard(value);
      }
      return "";
    },
    hideMobileNo: function (mobileNo) {
      var reg = /^(\d{3})\d{4}(\d{4})$/;
      return mobileNo.replace(reg, "$1****$2");
    },
    hideAccount: function (mobileNo) {
      var reg = /^(\d{3})\d{4}(\d{4})$/;
      return mobileNo.replace(reg, "$1****$2");
    },
    hideMoney: function (mobileNo) {
      if (mobileNo) {
        // let len = mobileNo.indexOf(".");
        // let arr = [];
        // for (let i = 0; i < len-1; i++) {
        //   let item = "x";
        //   arr.push(item);
        // }
        // let arrstring = arr.join("");
        // return arrstring + "x.xx元";
        return "**.**元";
      }
    },
    hideName: function (mobileNo) {
      //姓名
      var reg = /^./;
      return mobileNo.replace(reg, "*");
    },
    hideEmail: function (mobileNo) {
      //邮箱
      // var reg=/^./;
      // return mobileNo.replace(reg, "*");
      if (mobileNo) {
        let len = mobileNo.indexOf("@") - 2;
        let arr = [];
        for (let i = 0; i < len; i++) {
          let item = "*";
          arr.push(item);
        }
        let arrstring = arr.join("");
        return (
          mobileNo.substring(0, 1) +
          arrstring +
          mobileNo.substring(mobileNo.indexOf("@") - 1)
        );
      }
    },
    hideidCard: function (mobileNo) {
      //身份证
      var reg = /^(.{1})\d{16}(.{1})$/;
      return mobileNo.replace(reg, "$1****************$2");
    },
    hidebankCard: function (mobileNo) {
      //银行卡
      var reg = /.*(.{4})$/;
      return mobileNo.replace(reg, "***************$1");
    },
  },
};
</script>